<template>
  <!-- 课表详情 -->
  <div class="info-schedule-box">
    <div class="big-schedule-box">
      <div class="big-schedule-header">
        <p>
          <span class="green">可排</span>
          <span class="yellow">冲突</span>
          <span class="red">禁排</span>
        </p>
        <h3>
          <span>172铁--123</span>的课程表
        </h3>
      </div>
      <div class="big-schedule-content clearfix" v-loading.lock="loading" element-loading-background="#0001001f">
        <div class="schedule-week">
          <p v-for=" (item,index) in maxWeek" :key="index" :class="(currentWeek == index+1) ? 'active' : ''" @click="changeCurrentWeek(index)">D{{index+1}}周</p>
        </div>
        <div class="course-index-box">
          <p></p>
          <p>一</p>
          <p>二</p>
          <p>三</p>
          <p>四</p>
          <p>五</p>
          <p>六</p>
          <p>七</p>
          <p>八</p>
        </div>
        <div class="big-schedule-info">
          <ul>
            <li class="clearfix">
              <span class="tb-header">星期一</span>
              <span class="tb-header">星期二</span>
              <span class="tb-header">星期三</span>
              <span class="tb-header">星期四</span>
              <span class="tb-header">星期五</span>
              <span class="tb-header">星期六</span>
              <span class="tb-header">星期日</span>
            </li>
            <li class="clearfix" :style="{height:'576px'}">
              <span class="course-list" v-for="(item, index) in flagEmpty" :key="index" :data-msg="showConflict(index).msg" @drop="drop($event)" @dragover="allowDrop($event,showConflict(index).msg,index)" :class="showConflict(index).color == 0 ? 'yellow': (showConflict(index).color == 1 ?'red':'')">
                <div class="cell pointer" v-if="item" :draggable='true' @dragstart='drag($event)' v-tip.dark="item.courseName" :data-index="index" @mousedown="getConflictList(hasCourse(index).id)" :class="showConflict(index).color == 0 ? 'yellow': (showConflict(index).color == 1 ?'red':'')">
                  <p>{{item.courseName}}</p>
                  <p>{{item.teacherName}}</p>
                  <p>{{item.className}}</p>
                </div>
              </span>
            </li>

          </ul>
          <p class="wait-course">待排课程（
            <em>0</em>）</p>
          <ul class="wait-course-list">
            <li class="course-list clearfix" @drop='droped($event)' @dragover='allowDrop($event)'>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
let dom = null;
let courseIndex = 0;
import { api_config } from "../../util/config.js";
export default {
  data() {
    return {
      loading: false,
      flagEmpty: [],
      courses: [], // 所有课程
      conflictList: [], // 冲突课程
      maxWeek: 0, // 最大周
      currentWeek: 1, // 当前周
      msgIndex: -1
    };
  },
  methods: {
    /* 获取课程 */
    async getTableByWeek() {
      let _this = this;
      _this.flagEmpty.splice(0, _this.flagEmpty.length);
      _this.courses.splice(0, _this.courses.length);

      let r = await this.$http.get(api_config.getTableByWeek, {
        params: {
          week: _this.currentWeek,
          type: 0,
          id: "E029A1ED-E805-485B-8D4D-A4F433146C77"
        }
      });

      if (!r || !r.body) {
        this.$message.error("error");
        return false;
      }

      _this.courses = [...r.body.Data];

      let arr = new Array(56);

      for (let value of _this.courses) {
        let num = (value.index - 1) * 7 + value.week;
        arr[num - 1] = value;
        // _this.flagEmpty.splice(num-1, 1, value);
      }

      _this.flagEmpty = [...arr];

      return false;
    },
    /* 获取系统最大周 */
    async getMaxWeek() {
      let _this = this;

      let r = await this.$http.get(api_config.getMaxWeek);

      if (!r || !r.body) {
        this.$message.error("error");
        return false;
      }
      _this.maxWeek = r.body.Data;
    },

    changeCurrentWeek(m) {
      this.conflictList.splice(0, this.conflictList.length);
      this.currentWeek = m + 1;
      this.getTableByWeek();
    },

    /* 分布课程 */
    hasCourse(i) {
      let flag = "";
      for (let val of this.courses) {
        if (i + 1 == (val.index - 1) * 7 + val.week) {
          flag = val;
        }
      }
      return flag;
    },

    /* 显示冲突课程 */
    showConflict(i) {
      let conflictVal = "";
      for (let item of this.conflictList) {
        if (i + 1 == (item.index - 1) * 7 + item.week) {
          conflictVal = item;
        }
      }
      return conflictVal;
    },

    /* 获取冲突课程 */
    async getConflictList(id) {
      let _this = this;

      let r = await this.$http.get(api_config.getConflictCell, {
        params: {
          id: id
        }
      });
      if (!r || !r.body) {
        this.$message.error("error");
        return false;
      }
      _this.conflictList.splice(0, _this.conflictList.length);
      _this.conflictList = [...r.body.Data];
    },

    drag(event) {
      dom = event.currentTarget;
      courseIndex = dom.getAttribute("data-index");
    },

    drop(event) {
      event.preventDefault();

      let coverCourse =
        event.currentTarget.childNodes[0].parentElement.innerHTML;

      event.currentTarget.prepend(dom);

      document.getElementsByClassName("course-list")[
        courseIndex
      ].innerHTML = coverCourse;

      dom = null;

      this.conflictList.splice(0, this.conflictList.length);
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },

    allowDrop(event, msg, index) {
      event.preventDefault();

      if (msg) {
        if (this.msgIndex != index) {
          this.msgIndex = index;
          this.$notify.error({
            title: "冲突",
            message: msg
          });
        }else{
          return false;
        }
      }else{
        return false;
      }
    },

    droped(event) {
      event.preventDefault();

      event.currentTarget.appendChild(dom);
      dom = null;

      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    }
  },
  mounted() {
    this.getMaxWeek();
    this.getTableByWeek();
  }
};
</script>
  
  <style>
.wait-course-list {
  margin: 10px 0 0 40px;
  padding: 10px;
  background: #edf1f5;
}

.wait-course-list > li.course-list {
  border: none;
  height: 60px;
}

.wait-course-list > li.course-list .cell {
  width: 14.28%;
  border: 1px solid #d7dfe7;
  text-align: center;
  float: left;
  margin-left: -1px;
  transition: all linear 0.3s;
}

.wait-course-list > li.course-list p {
  line-height: 20px;
  font-weight: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.course-index-box {
  float: left;
  width: 49px;
  margin-right: -100px;
  margin-left: 50px;
  text-align: center;
  border: 1px solid #d7dfe7;
  border-right: none;
  border-bottom: none;
}

.course-index-box > p {
  border-bottom: 1px solid #d7dfe7;
  height: 71px;
  line-height: 71px;
  background: #edf1f5;
}

.course-index-box > p:first-child {
  height: 34px;
}
</style>
  